<div class="box">
    <div class="heading">
        <h1><img alt="" src="<?php echo base_url('assets/admin/images/banner.png'); ?>">Edit Image</h1>

        <div class="buttons">
            <a class="button" href="#" onClick="$('#form').submit();"><span>Save</span></a>
            <a class="button" href="<?php echo base_url(ADMIN_PATH . '/banner/images/'.$bannerid); ?>"><span>Cancel</span></a>
        </div>
    </div>
    <div class="content">

        <?php echo form_open(null, 'id="form"')?>

        <div class="form">
            <div>
                <?php echo form_label('<span class="required">*</span> Title:', 'title'); ?>
                <?php echo form_input(array('name' => 'title', 'id'=>'title', 'value'=>set_value('title',!empty($Image['title']) ? $Image['title'] : '')))?>
            </div>
			
			<div>
                <?php echo form_label('Alternative Text:', 'alt'); ?>
                <?php echo form_input(array('name' => 'alt','id'=>'alt', 'value'=>set_value('alt',!empty($Image['alt']) ? $Image['alt'] : '')))?>
            </div>
			<div>
                <?php echo form_label('Image:', 'filename'); ?>
                <a id="change_image" href="javascript:void(0)"><img id="image" src="<?php echo base_url('assets/uploads/images').'/'.$Image['filename']; ?>" /></a>
                <input type="hidden" value="<?php echo set_value('filename', isset($Image['filename']) ? $Image['filename'] : ''); ?>" name="filename" id="filename" />
            </div>
			<div>
                <?php echo form_label('Description:', 'description'); ?>
                <div style="display: inline-block;">
                    <?php echo form_textarea(array( 'name' => 'description', 'id' => 'description', 'class' => 'ckeditor_textarea','value' => set_value('description', isset($Image['description']) ? $Image['description'] : ''))); ?>
                </div>
            </div>
			<div>
                <?php echo form_label('', '')?>
                <span>
                    <label><?php echo form_checkbox(array( 'name' => 'hide', 'id' => 'hide', 'value' => '1', 'checked' => set_checkbox('hide', '1', (isset($Image['hide']) && $Image['hide']) ? TRUE : FALSE))); ?> Hide Image <span style="display: inline;" class="help">(Will not be shown in banner)<span></label>
                </span>
            </div>
        </div>

        <div class="clear"></div>

        <?php echo form_close(); ?>
    </div>
</div>
<style type="text/css">

#image {
    width: 100px;
    height: 100px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    color: #fff;
}

</style>
<script type="text/javascript">
    $(document).ready( function() {

        $('#change_image').click( function() {
			
            window.KCFinder = {
				callBack: function(url) {
					window.KCFinder = null;
					
					var img = new Image();
					img.src = url;
					//alert(url);
					img.onload = function() {
						$('#image').attr('src',url);
						
						var lastSlash = url.lastIndexOf("images/");
						//alert(lastSlash);
						var fileName=url.substring(lastSlash+7);
						//var fileName=url;
						/*var fileName = url.split('/').pop().split('\\').pop();
						alert (field);*/
						$('#filename').attr('value',fileName);
						
					}
				}
			};
			window.open('<?php echo base_url();?>assets/admin/js/kcfinder/browse.php?type=images&dir=images',
				'kcfinder_image', 'status=0, toolbar=0, location=0, menubar=0, ' +
				'directories=0, resizable=1, scrollbars=0, width=800, height=600'
			);
        });


        var thin_config = {
            toolbar : [
                        { name: 'basicstyles', items : [ 'Bold','Italic','-','NumberedList','BulletedList','-','Link','Unlink'] }
                    ],
            entities : false,
            resize_maxWidth : '400px',
            width : '550px',
            height : '120px'
        };
		$('textarea.ckeditor_textarea').each(function(index)
		{
                thin_config.height = $(this).height();
                CKEDITOR.replace('description', thin_config); 
        });
        
    });
</script>